<script setup>
import {ref} from "vue";
import CustomInput from "@/components/CustomInput.vue";

import request from "@/assets/request.js";
import store from "@/store.js";
import Message from "@/components/Message.vue";
import {useRouter} from "vue-router";
const router = useRouter()

const formData = ref({})

const forms = ref([
  {
    type: "text",
    placeholder: "Имя",
    name: 'first_name',
  },
  {
    type: "text",
    placeholder: "Фамилия",
    name: 'last_name',
  },
  {
    type: "email",
    placeholder: "Email",
    name: 'email',
  },
  {
    type: "password",
    placeholder: "Пароль",
    name: 'password',
  }
])

const errors = ref([])

const data = ref("")

const messageRef = ref()

const submitData = async () => {
  let response = await request('registration', 'POST', formData.value)
  if (response.status === 200) {
    router.push("/")
    return
  }
  if (response.status === 422) {
    errors.value = response.message.message
    return
  } else {
    errors.value = []
  }

  if (response.status === 401) {
    messageRef.value.showMessage('Неудачная попытка входа', 'Неверный Email или пароль', 8000)
  }
}


</script>

<template>
<div class="container-center">
  <form @submit.prevent="submitData">
    <h3>Регистрация</h3>
    <custom-input v-for="form in forms" :type="form.type" :placeholder="form.placeholder" :error="errors[form.name]" v-model="formData[form.name]"></custom-input>
    <input type="submit" value="Войти">
  </form>
  <Message ref="messageRef"/>
  </div>
</template>

<style scoped>
  form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: #42b883 solid 3px;
    border-radius: 16px;
    flex-direction: column;
    min-width: 600px;
    margin: auto auto;
  }

  h3 {
    font-size: 24px;
    color: white;
  }

  input[type=submit] {
    width: 100%;
    background: #2c3e50;
    outline: none;
    padding: 11px 13px;
    border-radius: 24px;
    color: white;
    font-size: 16px;
    transition: all ease-in-out .25s, margin-bottom 0s;
    border: #3cff95 solid 3px;
    cursor: pointer;
  }

  input[type=submit]:hover {
    box-shadow: 0px 0px 7px 3px #42b883;
  }


</style>